<template>
	<view class="add-car-container">
			<view class="form">
			<!-- 品牌 -->
			<view class="form-item">
				<text class="label">品牌</text>
				<input v-model="form.brand" placeholder="请输入车辆品牌" class="input" @blur="validateBrand" />
			</view>

			<!-- 型号 -->
			<view class="form-item">
				<text class="label">型号</text>
				<input v-model="form.model" placeholder="请输入车辆型号" class="input" @blur="validateModel" />
			</view>

			<!-- 车牌号 -->
			<view class="form-item">
				<text class="label">车牌号</text>
				<input v-model="form.plateNumber" placeholder="请输入车牌号" class="input" @blur="validatePlateNumber" />
			</view>

			<!-- 燃油类型 -->
			<view class="form-item">
				<text class="label">燃油类型</text>
				<picker @change="bindFuelTypeChange" :value="fuelTypeIndex" :range="fuelTypes" class="picker">
					<view class="picker-content">
						<text>{{fuelTypes[fuelTypeIndex] || '请选择燃油类型'}}</text>
						<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 油箱容量 -->
			<view class="form-item">
				<text class="label">油箱容量(L)</text>
				<input v-model="form.tankCapacity" type="number" placeholder="请输入油箱容量" class="input"
					@blur="validateTankCapacity" />
			</view>

			<!-- 初始里程 -->
			<view class="form-item">
				<text class="label">当前里程(km)</text>
				<input v-model="form.initialMileage" type="number" placeholder="请输入当前里程" class="input"
					@blur="validateInitialMileage" />
			</view>

			<!-- 购买日期 -->
			<view class="form-item">
				<text class="label">购买日期</text>
				<picker mode="date" :value="form.purchaseDate" @change="bindPurchaseDateChange" class="picker">
					<view class="picker-content">
						<text>{{form.purchaseDate || '请选择购买日期'}}</text>
						<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 备注 -->
			<view class="form-item">
				<text class="label">备注</text>
				<textarea v-model="form.remark" placeholder="可填写车辆颜色、配置等信息" class="textarea"></textarea>
			</view>

			<!-- 提交按钮 -->
			<button @click="submitForm" :disabled="!formValid"
				:class="['submit-btn', formValid ? 'active' : 'disabled']">
				
				{{form.id!="" ? "编辑爱车":"添加爱车"}}
			</button>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'

	export default {
		data() {
			return {
				fuelTypeIndex: 0,
				fuelTypes: ['汽油', '柴油', '混合动力', '电动', '其他'],
				form: {
					//image: '/static/default-car.png',
					id:'',
					brand: '',
					model: '',
					plateNumber: '',
					fuelType: '汽油',
					tankCapacity: '',
					initialMileage: '',
					purchaseDate: dayjs().format('YYYY-MM-DD'),
					remark: ''
				},
				formValid: false
			}
		},
		onShow() {
			this.initData()
		},
		methods: {
			async initData() {
				uni.showLoading()
				try {
					const res = await this.$api.getCarInfo()
					if (res.code == 200) {
						uni.hideLoading()
						if(res.data != null){
							console.log(res.data)
							const carInfo = res.data
							this.form.id = carInfo.id
							this.form.brand = carInfo.brand
							this.form.model = carInfo.model
							this.form.plateNumber = carInfo.plateNumber
							//this.form.fuelType = carInfo.fuelType
							this.form.tankCapacity = carInfo.tankCapacity
							this.form.initialMileage = carInfo.initialMileage
							this.form.purchaseDate = carInfo.purchaseDate
							this.form.remark = carInfo.remark
							
							this.fuelTypeToIndex(carInfo.fuelType);
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: error.message || '初始化失败',
						icon: 'none'
					})
				}
			},

			// 选择燃油类型
			bindFuelTypeChange(e) {
				this.fuelTypeIndex = e.detail.value
				this.form.fuelType = this.fuelTypes[this.fuelTypeIndex]
				this.validateForm()
			},
			
			fuelTypeToIndex(val){
				this.form.fuelType = val
				for (var index = 0; index < this.fuelTypes.length; index++) {
					if(this.form.fuelType == this.fuelTypes[index]){
						this.fuelTypeIndex = index;
					}
				}
			},

			// 选择购买日期
			bindPurchaseDateChange(e) {
				this.form.purchaseDate = e.detail.value
				this.validateForm()
			},

			// 验证品牌
			validateBrand() {
				if (!this.form.brand) {
					uni.showToast({
						title: '请输入车辆品牌',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 验证型号
			validateModel() {
				if (!this.form.model) {
					uni.showToast({
						title: '请输入车辆型号',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 验证车牌号
			validatePlateNumber() {
				if (!this.form.plateNumber) {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 验证油箱容量
			validateTankCapacity() {
				if (this.form.tankCapacity && parseFloat(this.form.tankCapacity) <= 0) {
					uni.showToast({
						title: '油箱容量必须大于0',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 验证初始里程
			validateInitialMileage() {
				if (this.form.initialMileage && parseFloat(this.form.initialMileage) < 0) {
					uni.showToast({
						title: '里程不能为负数',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 验证表单
			validateForm() {
				this.formValid = !!(
					this.form.brand &&
					this.validateBrand() &&
					this.form.model &&
					this.validateModel() &&
					this.form.plateNumber &&
					this.validatePlateNumber() &&
					this.form.fuelType &&
					(this.form.tankCapacity === '' || this.validateTankCapacity()) &&
					(this.form.initialMileage === '' || this.validateInitialMileage())
				)
			},

			// 提交表单
			async submitForm() {
				if (!this.formValid) return
				const loading = uni.showLoading({
					title: '提交中...',
					mask: true
				})
				try {
					const params = {
						brand: this.form.brand,
						model: this.form.model,
						plateNumber: this.form.plateNumber,
						fuelType: this.form.fuelType,
						tankCapacity: this.form.tankCapacity ? parseFloat(this.form.tankCapacity) : null,
						initialMileage: this.form.initialMileage ? parseFloat(this.form.initialMileage) : 0,
						purchaseDate: this.form.purchaseDate,
						image: this.form.image, // 实际项目中应该是上传后的URL
						remark: this.form.remark || null
					}

					const res = await this.$api.saveCar(params)
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						})

						// 返回上一页并刷新车辆列表
						setTimeout(() => {
							//uni.$emit('carAdded')
							uni.navigateBack()
						}, 1500)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}

				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: error.message || '添加失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.add-car-container {
		padding: 20rpx 30rpx;
	}

	.header {
		margin-bottom: 40rpx;
	}

	.header .title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.upload-container {
		width: 100%;
		height: 300rpx;
		border: 2rpx dashed #ccc;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.car-image {
		width: 100%;
		height: 100%;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.input {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		background-color: #fff;
	}

	.picker {
		width: 100%;
	}

	.picker-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		background-color: #fff;
	}

	.textarea {
		width: 100%;
		height: 180rpx;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		background-color: #fff;
	}

	.submit-btn {
		margin-top: 60rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}

	.submit-btn.disabled {
		background-color: #ccc;
		color: #fff;
		opacity: 0.7;
	}

	.submit-btn.active {
		background-color: #007AFF;
	}
</style>